/**
 * title: 状态展示
 * description: 展示标签页的所有交互状态：normal、hover、active、selected、disabled
 */

import React from 'react';
import { Tabs, Space, Card } from '../../../';
import type { TabsProps } from 'antd';

const App: React.FC = () => {
  const normalItems: TabsProps['items'] = [
    { key: '1', label: '选中样式', children: '内容区域' },
    { key: '2', label: '可选样式二', children: '内容区域' },
    { key: '3', label: '可选样式三', children: '内容区域' },
  ];

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* Normal 状态 */}
      <Card title="Normal（正常状态）" size="small">
        <Tabs 
          defaultActiveKey="2"
          items={normalItems}
        />
      </Card>

      {/* Hover 状态提示 */}
      <Card title="Hover（悬浮状态）" size="small">
        <div style={{ marginBottom: 8, color: '#999', fontSize: 12 }}>
          💡 将鼠标移动到未选中的标签上，查看悬浮效果
        </div>
        <Tabs 
          defaultActiveKey="2"
          items={normalItems}
        />
      </Card>

      {/* Active/Selected 状态 */}
      <Card title="Active / Selected（激活/选中状态）" size="small">
        <Tabs 
          defaultActiveKey="1"
          items={normalItems}
        />
      </Card>

      {/* Disabled 状态 */}
      <Card title="Disabled（禁用状态）" size="small">
        <Tabs 
          defaultActiveKey="1"
          items={[
            { key: '1', label: '正常标签', children: '内容区域' },
            { key: '2', label: '禁用标签', children: '内容区域', disabled: true },
            { key: '3', label: '禁用标签', children: '内容区域', disabled: true },
          ]}
        />
      </Card>

      {/* 边框样式的状态展示 */}
      <Card title="边框样式 - 各种状态" size="small">
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>Normal</div>
            <Tabs 
              variant="border"
              defaultActiveKey="2"
              items={[
                { key: '1', label: '选中样式' },
                { key: '2', label: '可选样式二' },
                { key: '3', label: '可选样式三' },
              ]}
            />
          </div>

          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>Selected（选中）</div>
            <Tabs 
              variant="border"
              defaultActiveKey="1"
              items={[
                { key: '1', label: '选中样式' },
                { key: '2', label: '可选样式二' },
                { key: '3', label: '可选样式三' },
              ]}
            />
          </div>

          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>Disabled（禁用）</div>
            <Tabs 
              variant="border"
              defaultActiveKey="1"
              items={[
                { key: '1', label: '正常样式' },
                { key: '2', label: '可选样式二' },
                { key: '3', label: '禁用样式', disabled: true },
              ]}
            />
          </div>
        </Space>
      </Card>

      {/* 填充样式的状态展示 */}
      <Card title="填充样式（胶囊）- 各种状态" size="small">
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>Normal</div>
            <Tabs 
              variant="filled"
              defaultActiveKey="2"
              items={[
                { key: '1', label: '选中样式' },
                { key: '2', label: '可选样式二' },
                { key: '3', label: '可选样式三' },
              ]}
            />
          </div>

          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>Selected（选中）</div>
            <Tabs 
              variant="filled"
              defaultActiveKey="1"
              items={[
                { key: '1', label: '选中样式' },
                { key: '2', label: '可选样式二' },
                { key: '3', label: '可选样式三' },
              ]}
            />
          </div>

          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>Disabled（禁用）</div>
            <Tabs 
              variant="filled"
              defaultActiveKey="1"
              items={[
                { key: '1', label: '正常样式' },
                { key: '2', label: '可选样式二' },
                { key: '3', label: '禁用样式', disabled: true },
              ]}
            />
          </div>
        </Space>
      </Card>
    </Space>
  );
};

export default App;

